// import React from 'react'
// import { Checkbox, Menu, DropDown, Modal, ClassNameX } from '@/user-interface/ui'
// import FastTable from 'fast-table'
// import { combineComponent } from '@/orangecat/pivot/combiner'
// import { dispatchX } from '@/orangecat/xhr/request'
// import { objectString, duplicateRemoval } from '@/popular/common'
// import { Resizable } from 'react-resizable'

// import 'fast-table/theme/table.css'
// import './fast-table-ex.less'

// class FastTableX extends React.Component {

//   state = {
//     customTableProps: {},
//     tableHeaderResizing: false
//   }

//   tableHeaderDragState = {
//     dragSourceIndex: null,
//     dragTargetIndex: null
//   }

//   tableResizableTitleProp = (column, index) => {
//     return {
//       width: column.width,
//       index: index,
//       dataIndex: column.dataIndex,
//       fixed: column.fixed,
//       sortable: column.sortable || column.sortEnable,
//       resizable: column.resizable,
//       onResize: this.tableOnColumnResize(index),
//       children: column._title
//     }
//   }

//   tableOnColumnResize = (index) => (e, { size }) => {
//     e.preventDefault()
//     e.stopPropagation()
//     const { customTableProps } = this.state
//     if (!customTableProps.columns[index].fixed) {
//       customTableProps.columns[index].width = size.width || 0
//       this.setState({ tableHeaderResizing: true })
//       setTimeout(() => {
//         if (customTableProps.columns[index].width === size.width) {
//           this.setState({ tableHeaderResizing: false })
//           this.handleSaveSetting()
//         }
//       }, 250)
//       this.handleSaveSetting()
//     }
//   }

//   tableResizableTitle = (props) => {
//     const { tableHeaderDragState } = this
//     const { tableHeaderResizing } = this.state
//     const { onResize, width, index, dataIndex, fixed, sortable, resizable, children, locked, ...restProps } = props
//     const allowDrag = !tableHeaderResizing && !fixed
//     return (
//       <DropDown
//         trigger={['contextMenu']} overlay={this.DOMContextMenu()}>
//         <Resizable
//           className={ClassNameX('table-header-cell', {
//             'fixed': fixed,
//             'resizable-header-cell': resizable !== false,
//             'un-resizable': resizable === false,
//             'drag-source': tableHeaderDragState.dragSourceIndex === index,
//             'drag-target': tableHeaderDragState.dragTargetIndex === index
//           })}
//           width={Number(width) || 0}
//           height={0}
//           axis={'x'}
//           onResize={onResize}
//           onClick={this.handleSortClick(dataIndex, sortable)}
//         >
//           <div
//             style={{ display: 'flex' }}
//             draggable={allowDrag}
//             onDragStart={this.handleSettingRowOnDragStart(index)}
//             onDragOver={this.handleSettingRowOnDragOver(index, allowDrag)}
//             onDragEnd={this.handleSettingRowOnDragEnd(index)}
//             data-index={index || 'null'}
//             {...restProps}
//           >
//             <span className={'title-content'}>{children}</span>
//             {
//               sortable && (
//                 <span className={ClassNameX('sort-btn-rect', {
//                   asc: this.sortIndex === dataIndex && this.sortType === 1,
//                   des: this.sortIndex === dataIndex && this.sortType === -1
//                 })}>
//                   <span className={'sort-asc'} />
//                   <span className={'sort-des'} />
//                 </span>
//               )
//             }
//           </div>
//         </Resizable>
//       </DropDown>
//     )
//   }

//   tableSettingModalContent = () => {
//     const { columns, colGroups } = this.state.customTableProps
//     const headerGroups = duplicateRemoval(columns.map((col) => col.groupId)).sort((a, b) => a === b ? 0 : (a > b ? 1 : -1))
//     return (
//       <div className={'custom-table-setting'}>
//         {
//           headerGroups.map((groupId, index) => {
//             const thisGroupHeaders = columns.filter((col) => col.groupId === groupId) // && !col.locked)
//             return thisGroupHeaders.length ? (
//               <ul className={'col-group'} key={index}>
//                 <span className={'group-name'}>{(colGroups || {})[groupId]}</span>
//                 {
//                   thisGroupHeaders.map((col, i) => {
//                     const title = col.titleText || col._title
//                     const forceCheck = col.locked
//                     return (
//                       <li className={'col-item'} key={i}>
//                         <Checkbox
//                           defaultChecked={!col.hide || forceCheck}
//                           disabled={forceCheck}
//                           onChange={this.handleTableHeaderChecked(col)}
//                         >
//                           {title ? (<span>{title}</span>) : (<span className={'empty-title'}>（空表头）</span>)}
//                         </Checkbox>
//                       </li>
//                     )
//                   })
//                 }
//               </ul>
//             ) : null
//           })
//         }
//       </div>
//     )
//   }

//   handleTableHeaderChecked = (col) => {
//     return (e) => {
//       col.hide = !e.target.checked
//     }
//   }

//   handleSaveSetting = () => {
//     const { name, tableSettings } = this.props
//     const { customTableProps } = this.state
//     // if this table has a name
//     if (name) {
//       // save custom setting in redux state
//       dispatchX({
//         type: 'GLOBAL/tableSettings',
//         actionKey: (new Date()).getTime(),
//         payload: Object.assign({}, Object.assign(tableSettings, {
//           [name]: {
//             sortIndex: this.sortIndex || null,
//             sortType: this.sortType || null,
//             columns: JSON.parse(objectString(customTableProps.columns))
//           }
//         }))
//       })
//     }
//   }

//   handleResetSetting = () => {
//     const { name, tableSettings } = this.props
//     this.sortIndex = null
//     this.sortType = null
//     dispatchX({
//       type: 'GLOBAL/tableSettings',
//       payload: Object.assign({}, Object.assign(tableSettings, {
//         [name]: undefined
//       }))
//     })
//   }

//   handleSettingRowOnDragStart = (index) => {
//     return () => {
//       const { customTableProps } = this.state
//       this.tableHeaderDragState.dragSourceIndex = index
//       this.setState({ customTableProps })
//       this.handleSaveSetting()
//     }
//   }

//   handleSettingRowOnDragOver = (index, allowDrag) => {
//     if (!allowDrag) {
//       return undefined
//     }
//     return (event) => {
//       const { customTableProps } = this.state
//       const { dragSourceIndex } = this.tableHeaderDragState
//       event.preventDefault()
//       if (!dragSourceIndex) {
//         return null
//       }
//       if (this.tableHeaderDragState.dragTargetIndex !== index) {
//         this.tableHeaderDragState.dragTargetIndex = index
//         this.setState({ customTableProps })
//         this.handleSaveSetting()
//       }
//     }
//   }

//   handleSettingRowOnDragEnd = () => {
//     return () => {
//       const { customTableProps } = this.state
//       const { columns } = customTableProps
//       // record source and target column
//       const sourceCol = columns[this.tableHeaderDragState.dragSourceIndex]
//       const targetCol = columns[this.tableHeaderDragState.dragTargetIndex] || sourceCol
//       if (sourceCol !== targetCol && !targetCol.fixed) {
//         // make column exchange
//         const dragSourceIndex = this.tableHeaderDragState.dragSourceIndex
//         const dragTargetIndex = this.tableHeaderDragState.dragTargetIndex
//         this.tableHeaderDragState.dragSourceIndex = this.tableHeaderDragState.dragTargetIndex - (dragSourceIndex < dragTargetIndex)
//         columns.splice(dragSourceIndex, 1)
//         columns.splice(columns.indexOf(targetCol), 0, sourceCol)
//         // console.log(dragSourceIndex, dragTargetIndex)
//         this.setState({ customTableProps })
//         // this.handleSaveSetting()
//       }
//       setTimeout(() => {
//         this.tableHeaderDragState.dragSourceIndex = null
//         this.tableHeaderDragState.dragTargetIndex = null
//         this.setState({ customTableProps })
//         this.handleSaveSetting()
//       }, 200)
//     }
//   }

//   handleSortClick = (dataIndex, sortable) => {
//     return () => {
//       if (sortable) {
//         if (this.sortIndex === dataIndex) {
//           if (this.sortType === 1) {
//             this.sortType = -1
//           } else {
//             this.sortIndex = null
//             this.sortType = null
//           }
//         } else {
//           this.sortIndex = dataIndex
//           this.sortType = 1
//         }
//         this.handleSaveSetting()
//       }
//     }
//   }

//   handleCustomTableModal = () => {
//     const { tableSettings } = this.props
//     this.tableSettingModalRender = Modal.dialog({
//       title: '表头设置',
//       width: 680,
//       draggable: true,
//       content: this.tableSettingModalContent.bind(this)(),
//       onOk: (e, updateRender) => {
//         this.sortIndex = null
//         this.sortType = null
//         this.handleSaveSetting()
//         // close and destroy this modal
//         updateRender({ visible: false })
//         this.tableSettingModalRender = undefined
//       },
//       onCancel: () => {
//         dispatchX({
//           type: 'GLOBAL/tableSettings',
//           payload: Object.assign({}, tableSettings)
//         })
//         this.tableSettingModalRender = undefined
//       }
//     })
//   }

//   hookTableOnRow = () => {
//     return {
//       // onClick or some events
//     }
//   }

//   DOMContextMenu = (MenuItem = Menu.Item) => (
//     <Menu>
//       <MenuItem key={'1'} onClick={this.handleCustomTableModal}>表头设置</MenuItem>
//       <MenuItem key={'2'} onClick={this.handleResetSetting}>恢复默认</MenuItem>
//     </Menu>
//   )

//   customTableProps = (nextProps) => {
//     const newProps = Object.assign({}, nextProps)
//     const { columns, dataSource } = newProps
//     const sortIndex = this.sortIndex || null
//     const sortType = this.sortType || 0
//     let sortFunc = (a, b) => {
//       if (a[sortIndex] > b[sortIndex]) {
//         return sortType * -1
//       } else {
//         return sortType
//       }
//     }
//     const newColumns = columns.map((column) => {
//       if (sortType) {
//         if (column.dataIndex === sortIndex && column.sortFunc) {
//           sortFunc = column.sortFunc.bind({ sortType: this.sortType })
//         }
//       }
//       return Object.assign({}, column)
//     })
//     newProps._onRow = newProps.onRow || (() => { })
//     newProps.onRow = (row) => {
//       return Object.assign(this.hookTableOnRow(row), newProps._onRow(row))
//     }
//     if (typeof (this.sortType) === 'number' && this.sortIndex) {
//       newProps._dataSource = dataSource

//       let _sortType = {
//         sortType: this.sortType
//       }
//       newProps.dataSource = dataSource.concat([]).sort(sortFunc.bind(_sortType))
//     } else {
//       newProps.dataSource = newProps.dataSource.concat([])
//     }
//     return Object.assign(newProps, { columns: newColumns })
//   }

//   mergePropsFromCustomTableSetting = (props) => {
//     const { name, tableSettings } = props
//     const currentProps = this.customTableProps(props)
//     if (name && tableSettings) {
//       if (tableSettings[name] && tableSettings[name].columns) {
//         this.sortIndex = tableSettings[name].sortIndex
//         this.sortType = tableSettings[name].sortType
//         currentProps.columns = tableSettings[name].columns.filter(col => props.columns.some(c => c.dataIndex === col.dataIndex))
//           .map((col) => {
//             let newCol = col
//             if (col && col.dataIndex) {
//               currentProps.columns.map((column) => {
//                 if (column.dataIndex === col.dataIndex) {
//                   newCol = Object.assign(column, col)
//                 }
//               })
//             }
//             return newCol
//           })
//       }
//     }
//     currentProps.columns.map((column, index) => {
//       if (!column) {
//         console.error('Reload Error: Table column dataIndex should be unique!')
//       }
//       if (!column._render) {
//         column._render = column.render || ((text, row, index, width) => (
//           <div style={{ width: typeof (width) === 'string' ? width : width + 'px', overflow: 'hidden' }}>{text}</div>)
//         )
//         column.render = (text, row, index) => {
//           return column._render(text, row, index, column.width || 'auto')
//         }
//       }
//       column._title = column.title || ''
//       column.title = this.tableResizableTitle(this.tableResizableTitleProp(column, index))
//     })

//     return currentProps
//   }

//   componentWillMount () {
//     this.setState({ customTableProps: this.mergePropsFromCustomTableSetting(this.props) })
//   }

//   componentWillReceiveProps (nextProps) {
//     if (!this.tableSettingModalRender) {
//       this.setState({ customTableProps: this.mergePropsFromCustomTableSetting(nextProps) })
//     }
//     if (this.props.columns !== nextProps.columns) {
//       this.setState({ customTableProps: this.mergePropsFromCustomTableSetting(nextProps) })
//     }
//     if (nextProps.rowHeight !== this.props.rowHeight) {
//       if (this.container && this.container.sizeManager && this.container.dataManager) {
//         this.container.sizeManager.update({ rowHeight: nextProps.rowHeight })
//         this.container.dataManager.rowHeight = nextProps.rowHeight
//       }
//     }
//   }

//   componentDidMount () {
//     this.checkTableLoadTimer = setInterval(() => {
//       if (this.container) {
//         try {
//           Boolean(this.container._reactInternalFiber.child.child.child.child.child.type)
//           clearInterval(this.checkTableLoadTimer)
//         } catch (err) {
//           this.setState({ update: 1 })
//         }
//       }
//     }, 1000)
//   }

//   render () {
//     const { customTableProps } = this.state
//     const tableProps = Object.assign(Object.assign({}, customTableProps), {
//       className: ['fast-table-ex', customTableProps.className].join(' ').trim(),
//       columns: customTableProps.columns ? customTableProps.columns.filter(col => !col.hide) : [],
//       ref: r => this.container = r
//     })
//     return (
//       customTableProps.columns ? <FastTable {...tableProps} /> : <div className={'table-none-columns'} />
//     )
//   }
// }

// export default combineComponent({
//   c: FastTableX,
//   modelEx: ['PERSIST/tableSettings']
// })